<template>
  <div class="network-set base-main">
    <!--tab菜单选项-->
    <ul class="title line-bottom color7A7B82 bgcFFF">
      <li :class="[{'active' : nav === 0}, 'text-c pr']" @click="nav=0">
        网点
        <span class="pa"></span>
      </li>
      <li :class="[{'active' : nav === 1}, 'text-c pr']" @click="nav=1">
        设备
        <span class="pa"></span>
      </li>
    </ul>

    <!--内容-->
    <div class="content">
      <!--网点套餐设置-->
      <div v-if="nav === 0" class="network">
        <Network
          :networkData="networkData"
          @send-set="networkSet"
        />
      </div>
      <div v-if="nav === 1" class="equipment">
        <Device
          :deviceData="deviceData"
          @send-set="deviceSet"
        />
      </div>
    </div>

    <!--暂无数据-->
    <NewNoneData
      :show="networkData.length == 0 && deviceData.length == 0"
      :txt1="txt1"
      :txt2="txt2"
    />
    <!--新建网点按钮-->
    <base-bottom-btn
      v-if="nav === 0"
      @hasClick="hasClick"
      customIcon="iconshangpinfenxiangtubiaox"
      txt="新建网点"
    />

  </div>
</template>

<script type="text/ecmascript-6">
  import baseBottomBtn from '../../components/BaseBottomBtn'
  import NewNoneData from '../../components/NewNoneData.vue'
  import Network from '../../components/Network.vue'
  import Device from '../../components/Device.vue'
  export default {
    components:{
      baseBottomBtn,
      NewNoneData,
      Network,
      Device
    },
    data() {
      return {
        nav: 0, // 菜单选项,0--网点，1--设备
        txt1: '', // 无数据时显示文案第一行
        txt2: '', // 无数据时显示文案第二行
        networkData: [
          {
            id:1,
            name:'广州市花都区索弗交流吧',
            number:'13562452522',
          },
          {
            id:2,
            name:'广州市花都区索弗交流吧222',
            number:'12',
          },
        ], // 网点数据
        deviceData: [
          {
            id:1,
            name:'一号设备',
            network:'广州市花都区索弗交流吧',
          },
          {
            id:2,
            name:'二号设备',
            network:'广州市花都区索弗交流吧222',
          }
        ], // 设备数据
      }
    },
    watch:{
      nav(newV, oldV) {
        if(newV === 0 && this.networkData.length === 0) {
          this.txt1 = '暂无网点'
          this.txt2 = '请点击下方按钮新建网点'
        } else if(newV === 1 && this.deviceData.length === 0) {
          this.txt1 = '暂无设备'
          this.txt2 = ''
        }
      },
    },
    methods: {
      // 网点
      networkSet(obj){
        switch (obj.type){
          case 1:
            this.networkEdit(obj.item);
            break;
          case 2:
            this.networkDel(obj.item);
            break;
        }
      },
      //编辑
      networkEdit(obj){
        console.log('网点编辑--', obj);
        this.$router.push({
          path: '/index/web/NetworkPackage',
          query: {id:obj.id}
        })
      },
      //删除
      networkDel(obj){
//        this.$toast({
//          message: '删除成功',
//          icon: 'passed'
//        })
        console.log('删除网点--', obj);
      },
      // 添加网点
      hasClick() {
        this.$router.push({
          path: '/index/web/AddNetwork'
        })
      },
      // 设备
      deviceSet(obj) {
        switch (obj.type){
          case 1:
            this.deviceEdit(obj.item);
            break;
          case 2:
            this.deviceDel(obj.item);
            break;
        }
      },
      //编辑
      devicekEdit(obj){
        console.log('设备编辑--', obj);
      },
      //删除
      devicekDel(obj){
//        this.$toast({
//          message: '删除成功',
//          icon: 'passed'
//        })
        console.log('删除设备--', obj);
      },
    },
  }
</script>

<style scoped>
  @import "../../assets/css/base.scss";
.network-set {background: #F7F8FA;}
.network-set .title{display: flex;height:40px;line-height: 40px;}
.network-set .title li{flex: 1;}
.network-set .title li.active{color: #3D7EFF;}
.network-set .title li span{content:'';bottom:0;left:50%;transform: translateX(-50%);height:2px;width:20%;}
.network-set .title li.active span{background: #3D7EFF;}
</style>
